<template>
    <div>
        <!-- 头部 -->
        <div class="category-header">
            <router-link tag="span" to="/index"><svg t="1640164914293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="64511" width="16" height="16"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#ffffff" p-id="64512"></path></svg></router-link>
            <div class="icont-header">福利</div>
        </div>

        <!-- 轮播图 -->
        <div class="banner">
            <div class="imgs">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item,index) in imgs" :key="index">
                        <img :src="item.pic" />
                    </van-swipe-item>
                 </van-swipe>
            </div>
        </div>

        <!-- 福利选项 -->
        <div class="welfare-content">
            <router-link tag="div" to="/index/signin" class="conca">
                <!-- <div class="nav-conca"><svg t="1640174788240" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="82100" width="48" height="48"><path d="M0 0m102.4 0l819.2 0q102.4 0 102.4 102.4l0 819.2q0 102.4-102.4 102.4l-819.2 0q-102.4 0-102.4-102.4l0-819.2q0-102.4 102.4-102.4Z" fill="#FF4545" p-id="82101"></path><path d="M636.7488 538.3424c-7.2448-7.3472-21.76-7.3472-29.0048 0l-134.2208 135.9104-50.7904-51.456c-7.2448-7.3216-21.76-7.3216-29.0048 0-7.2704 7.3728-7.2704 22.0672 0 29.3888l65.28 66.1248c7.2704 7.3472 21.76 7.3472 29.0304 0l14.5152-14.6944 134.1952-139.5712c10.88-7.3472 10.88-18.3552 0-25.7024z m32.64-165.2992H629.504v-40.3968h-224.896v40.3968h-39.9104v-40.3968h-97.92v106.496h500.5568v-106.496h-97.9456v40.3968z m134.2208-55.0912v470.144c0 14.6944-10.88 25.728-25.3952 25.728H252.2624c-14.5152 0-25.3952-11.008-25.3952-29.3888V317.952c0-14.6944 10.88-25.7024 25.3952-25.7024h112.4352V226.1248h39.936v66.1248h224.8704V226.1248h39.8848v66.1248h112.4608c14.5152 0 25.3952 11.008 21.76 25.7024z" fill="#FFFFFF" p-id="82102"></path></svg></div> -->
                <img src="../../assets/img/qiandao.png" alt="">
                <span>签到有礼</span>
            </router-link>
            <div class="conca">
                <!-- <div class="nav-conca"><svg t="1640174693594" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="80954" width="48" height="48"><path d="M921.6 1024H102.4c-56.32 0-102.4-46.08-102.4-102.4V102.4c0-56.32 46.08-102.4 102.4-102.4h819.2c56.32 0 102.4 46.08 102.4 102.4v819.2c0 56.32-46.08 102.4-102.4 102.4z" fill="#F13A3A" p-id="80955"></path><path d="M745.813333 346.453333h-25.6c5.12-6.826667 8.533333-15.36 11.946667-23.893333 5.12-18.773333 5.12-37.546667 0-54.613333-10.24-32.426667-40.96-51.2-76.8-51.2-34.133333 0-71.68 27.306667-112.64 80.213333-11.946667 17.066667-23.893333 34.133333-32.426667 47.786667-8.533333-13.653333-18.773333-30.72-32.426666-47.786667-39.253333-52.906667-78.506667-80.213333-112.64-80.213333-35.84 0-64.853333 20.48-76.8 51.2-5.12 17.066667-5.12 37.546667 0 54.613333 3.413333 8.533333 6.826667 17.066667 11.946666 23.893333h-25.6c-30.72 0-56.32 25.6-56.32 56.32v56.32c0 30.72 25.6 56.32 56.32 56.32h1.706667c-5.12 8.533333-6.826667 18.773333-6.826667 27.306667v196.266667c0 30.72 25.6 56.32 56.32 56.32h365.226667c30.72 0 56.32-25.6 56.32-56.32V542.72c0-10.24-1.706667-18.773333-6.826667-27.306667h1.706667c30.72 0 56.32-25.6 56.32-56.32v-56.32c3.413333-32.426667-22.186667-56.32-52.906667-56.32z m-180.906666-34.133333c34.133333-44.373333 66.56-69.973333 90.453333-69.973333 25.6 0 42.666667 11.946667 51.2 34.133333 6.826667 18.773333 3.413333 46.08-20.48 69.973333h-143.36c6.826667-10.24 13.653333-22.186667 22.186667-34.133333z m-247.466667-35.84c6.826667-20.48 25.6-34.133333 51.2-34.133333 23.893333 0 56.32 23.893333 90.453333 68.266666 8.533333 11.946667 17.066667 23.893333 23.893334 34.133334h-143.36c-25.6-22.186667-29.013333-51.2-22.186667-68.266667z m-68.266667 182.613333v-56.32c0-15.36 13.653333-29.013333 29.013334-29.013333h220.16v114.346667H278.186667c-15.36 0-29.013333-13.653333-29.013334-29.013334z m51.2 279.893334V542.72c0-13.653333 8.533333-23.893333 20.48-27.306667h177.493334V768h-168.96c-17.066667 0-29.013333-13.653333-29.013334-29.013333z m423.253334-196.266667v196.266667c0 15.36-13.653333 29.013333-29.013334 29.013333h-168.96V515.413333h177.493334c11.946667 3.413333 20.48 13.653333 20.48 27.306667z m51.2-83.626667c0 15.36-13.653333 29.013333-29.013334 29.013334H525.653333v-114.346667h220.16c15.36 0 29.013333 13.653333 29.013334 29.013333v56.32z" fill="#FFFFFF" p-id="80956"></path></svg></div> -->
                <img src="../../assets/img/xinshou.png" alt="">
                <span>新手礼包</span>
            </div>
            <router-link tag="div" to="/index/task" class="conca">
                <!-- <div class="nav-conca"><svg t="1640174819520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="82243" width="48" height="48"><path d="M950.857143 0H73.142857C32.182857 0 0 32.182857 0 73.142857v877.714286c0 40.96 32.182857 73.142857 73.142857 73.142857h877.714286c40.96 0 73.142857-32.182857 73.142857-73.142857V73.142857c0-40.96-32.182857-73.142857-73.142857-73.142857zM365.714286 190.171429h292.571428v117.028571H365.714286v-117.028571z m409.6 643.657142H248.685714V248.685714h87.771429v87.771429h351.085714v-87.771429h87.771429v585.142857z" fill="#d81e06" p-id="82244"></path><path d="M473.965714 637.805714L394.971429 558.811429l-30.72 30.72 109.714285 112.64 215.04-216.502858L658.285714 453.485714z" fill="#d81e06" p-id="82245"></path></svg></div> -->
                <img src="../../assets/img/shouchong.png" alt="">
                <span>每日任务</span>
            </router-link>
            <div class="conca">
                <!-- <div class="nav-conca"><svg t="1640174641973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="80407" width="48" height="48"><path d="M446.72 419.84H588.8L512.64 306.56 446.72 419.84z" fill="#d81e06" p-id="80408"></path><path d="M512 0C0 0 0 229.12 0 512s0 512 512 512 512-229.12 512-512 0-512-512-512z m0 821.12L224 432.64l113.92-165.76h348.16l113.92 165.76z" fill="#d81e06" p-id="80409"></path><path d="M368.64 300.8l57.6 106.88 62.08-106.88H368.64zM537.6 300.8l72.96 109.44 46.72-109.44H537.6zM632.32 419.84h117.76l-72.96-105.6-44.8 105.6z" fill="#d81e06" p-id="80410"></path></svg></div> -->
                <img src="../../assets/img/renwu.png" alt="">
                <span>首充福利</span>
            </div>
        </div>


        <!-- 精品热销限免 -->
        <div class="boutique-moduel">
            <div class="model-left">
                <div class="text">精品热销限免</div>    
            </div>    
        </div>
        
        <!-- 精品热销限免after -->
        <div class="boutique-model-recommend">
            <ul>
                <li v-for="(item,index) in welfarelist" :key="index" v-show="index<4" @click="bookClick(item,id)">
                    <img :src="item.cover" class="module-slide-img" alt="戏精夫妇今天离婚了吗">
                    <span>{{item.title}}</span>
                    <p>{{item.author}}</p>
                </li>
                
            </ul>
        </div>

        <!-- 人气免费 -->
        <div class="welfare-model">
            <div class="model-left">
                <div class="text">人气免费</div>    
            </div> 
            <div class="model-right">
                <div class="text">更多</div>   
                <div class="next"><svg t="1639565818740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6724" width="12" height="12"><path d="M674.133333 533.333333L341.333333 200.533333l29.866667-29.866666 362.666667 362.666666L371.2 896l-29.866667-29.866667 332.8-332.8z" fill="#444444" p-id="6725"></path></svg></div> 
            </div> 
        </div>

        <!-- 人气免费after -->
        <div class="welfare-text">
            <ol class="book-ol book-ol-normal">
                <li class="book-li" v-for="(item,index) in welfarelist" :key="index" v-show="index>3&&index<7" @click="bookClick(item.id)">
                    <div class="book-layout">
                        <img :src="item.cover" class="book-cover" alt="庆余年2天下太平">
                        <div class="book-cell">
                            <h4 class="book-title">{{item.title}}</h4>
                            <p class="book-desc">{{item.content}}</p>
                            <div class="book-meta">
                                <div class="book-meta-l">
                                    <span class="book-author book-author-gray">{{item.author}}</span>
                                </div>
                                <div class="book-meta-r">
                                    <span class="tag-small-group origin-right">
                                        <p class="tag-small lightgreen">{{item.category}}</p>
                                        <p class="tag-small lightblue">连载中</p>
                                        <p class="tag-small smallblue">95.73万</p>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                
            </ol>
        </div>


        <!-- 新书免费 -->
        <div class="welfare-model">
            <div class="model-left">
                <div class="text">新书免费</div>    
            </div> 
            <div class="model-right">
                <div class="text">更多</div>   
                <div class="next"><svg t="1639565818740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6724" width="12" height="12"><path d="M674.133333 533.333333L341.333333 200.533333l29.866667-29.866666 362.666667 362.666666L371.2 896l-29.866667-29.866667 332.8-332.8z" fill="#444444" p-id="6725"></path></svg></div> 
            </div> 
        </div>

        <!-- 新书免费after -->
        <div class="welfare-text">
            <ol class="book-ol book-ol-normal">
                <li class="book-li" v-for="(item,index) in welfarelist" :key="index" v-show="index>6" @click="bookClick(item.id)">
                    <div class="book-layout">
                        <img :src="item.cover" class="book-cover" alt="庆余年2天下太平">
                        <div class="book-cell">
                            <h4 class="book-title">{{item.title}}</h4>
                            <p class="book-desc">{{item.content}}</p>
                            <div class="book-meta">
                                <div class="book-meta-l">
                                    <span class="book-author book-author-gray">{{item.author}}</span>
                                </div>
                                <div class="book-meta-r">
                                    <span class="tag-small-group origin-right">
                                        <p class="tag-small lightgreen">{{item.category}}</p>
                                        <p class="tag-small lightblue">连载中</p>
                                        <p class="tag-small smallblue">95.73万</p>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                
            </ol>
        </div>

    
    </div>
</template>

<script>
import {getWelfareBook} from "../../api/welfare"
export default {
    data(){
        return {
            imgs:[
                {
                    pic:"//bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/37fe0e0d19843f0ad44761a79c2675b5.jpg"
                },
                {
                    pic:"//bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/e7dc7837b4c6f9d1262a417a0cf1ec48.jpg"
                }
            ],
            welfarelist:null
        }
    },
    methods:{
        bookClick(id){
            this.$emit('get-book-id',id)
            // console.log('一品id',id)
            this.$router.push({name:'bookdetail',params:{ids:id}})
        }
    },
    created(){
        getWelfareBook().then(data=>{
            this.welfarelist=data.list
            // console.log('获取到的福利书籍',data)
        })
    }
}
</script>

<style lang="less" scoped>
.category-header{
    width: 100%;
    height: 44px;
    background-color: #FC0E50;
    display: flex;
    align-items: center;
    span{
        display: block;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
    }
    .icont-header{
        color: white;
        margin: auto;
        padding-right: 44px;
    }
}

.banner{
    margin: auto;
    content: "";
    display: block;
    height: 136px;
    width: 100%px;
    .imgs{
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        margin: auto;
        width: 100%;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
}

.welfare-content{
    width: 100%;
    height: 86px;
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .conca{
        width: 56px;
        height: 74px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        img{
            width: 46px;
            height: 46px;
        }
        span{
            font-size: 12px;
            text-align: center;
        }
    }
}

.boutique-moduel{
    width: 100%;
    height: 28px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    background-color: white;
    .model-left{
        width: 100px;
        height: 20px;
        margin-left: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text{
            font-size: 16px;
            font-weight: bold;
        }

    }
}

.boutique-model-recommend{
    width: 100%;
    height: 172px;
    background-color: white;
    ul{
        width: 343px;
        height: 172px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        li{
            width: 82px;
            height: 172px;
            position: relative;
            img{
                width: 66px;
                height: 88px;
                margin-left: 8px;
                margin-top: 8px;
            }
            span{
                display: block;
                margin: 0.5rem 0.5rem;
                font-size: 0.8125rem;
                max-height: 2.125rem;
                line-height: 1.125rem;
                overflow: hidden;
                font-weight: bold;
            }
            p{  
                position: absolute;
                bottom: 8px;
                margin-left: 8px;
                font-size: .75rem;
                color: #808080;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }
}

.welfare-model{
    width: 100%;
    height: 28px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    .model-left{
        width: 87px;
        height: 20px;
        margin-left: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text{
            font-size: 16px;
            font-weight: bold;
        }

    }
    .model-right{
        margin-right: 16px;
        display: flex;
        .text{
            font-size: 12px;
            color: #808080;
        }
    }
}

.welfare-text{
    .book-ol{
        .book-li{
            background-color: white;
            .book-layout {
                display: block;
                padding: 1rem;
                position: relative;
                overflow: hidden;
                -webkit-transition: padding-left .15s;
                transition: padding-left .15s;
                .book-cover {
                    width: 4.125rem;
                    height: 5.5rem;
                    float: left;
                    margin-right: .5rem;
                    box-shadow: 0 4px 8px 0 rgba(51, 55, 61, 0.1);
                    border-radius: 2px;
                    font-size: 0;
                }
                .book-cell {
                    overflow: hidden;
                    .book-title {
                        line-height: 1.4;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        font-size: 0.875rem;
                    }
                    .book-desc {
                        line-height: 1.1875rem;
                        height: 2.25rem;
                        font-size: 0.75rem;
                        margin-bottom: .6rem;
                        color: #808080;
                        overflow: hidden;
                    }
                    .book-meta {
                        font-size: .75rem;
                        overflow: hidden;
                        .book-meta-l {
                            float: left;
                            .book-author {
                                display: block;
                                color: #808080;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                max-width: 10em;
                                max-width: calc(100vw - 2rem - (176rem / 16));
                                font-size: 0.75rem;
                                overflow: hidden;
                            }
                        }
                        .book-meta-r {
                            float: right;
                            position: relative;
                            top: 0.05rem;
                            .tag-small-group {
                                display: inline-block;
                                vertical-align: middle;
                                position: absolute;
                                top: 0.04rem;
                                right: 0;
                                white-space: nowrap;
                                .tag-small {
                                    display: inline-block;
                                    line-height: 10px;
                                    padding: 0.25em 0.25em;
                                    margin: 0 0.15em;
                                    font-size: 10px;
                                    transform: scale(1);
                                    vertical-align: bottom;
                                    border: 1px solid #F16299;
                                }
                                .lightgreen {
                                    color: #F16299;
                                }   
                                .lightblue {
                                    color: #F69A48;
                                }
                                .smallblue {
                                    color: #65B1F5;
                                }
                                p{
                                    font-size: 5px;
                                    font-style: normal;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

</style>